<template>
  <BasicLayout>
    <template #wrapper>
      <div style="height:20px" />
      <div style="overflow:auto;height:100%">
        <menu-table ref="refBox" height="500" :table-data="tableData" :columns="columns">
          <template slot="auth" slot-scope="scope">
            <div v-if="scope.item.level===3">
              <add-data-auth
                :big-data="{regionList:scope.item.regionList,
                            cityList:scope.item.cityList,
                            storeList:scope.item.storeList}"
                :boxs="scope.item"
                @collectData="collectData"
              />
            </div>
          </template>
        </menu-table>
        <el-row type="flex" justify="center">
          <el-button size="mini" type="primary" @click="save">保存</el-button>
          <el-button size="mini" @click="goBack">取消</el-button>
        </el-row>
      </div>
    </template>
  </BasicLayout>
</template>
<script>
import { mapActions, mapState } from 'vuex';
import { groupTree, addGroupRight } from '@/api/groupApi';
import menuTable from '../common/menu-table';
import addDataAuth from '../common/add-data-auth';
const columns = [
  {
    label: '菜单名称',
    prop: 'name'
  },
  {
    prop: 'auth',
    label: '按钮权限',
    slot: true
  }
];
export default {
  components: {
    menuTable,
    addDataAuth
  },
  data() {
    return {
      checkAll: false,
      isIndeterminate: false,
      columns: columns,
      tableData: [],
      objM: new Map()
    };
  },
  // 监听属性 类似于data概念
  computed: {
    ...mapState('diclist',
      { 'areaMaps': state => state.areaMaps,
        'cityMaps': state => state.cityMaps,
        'storeMaps': state => state.storeMaps
      })
  },
  // 监控data中的数据变化
  watch: {},
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {
    groupTree(this.$route.params.id).then(({ data }) => {
      this.tableData = data;
    });
    this.init();
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  // 方法集合
  methods: {
    ...mapActions({ 'intData': 'diclist/intData' }),
    init() {
      if (!this.areaMaps.has('all')) {
        this.intData('SET_AREA');
      }
      if (!this.cityMaps.has('all')) {
        this.intData('SET_CITY');
      }
      if (!this.storeMaps.has('all')) {
        this.intData('SET_STORE');
      }
    },
    // 回到上一页
    goBack() {
      this.$router.replace('/group');
    },
    // 处理需要保存的数据
    collectData(params) {
      const { str, cityList, regionList, storeList } = params;
      let regions, citys, stroes, rightSecondId, rightThreeId, groupId;
      // eslint-disable-next-line prefer-const
      groupId = this.$route.params.id;
      // eslint-disable-next-line prefer-const
      regions = regionList.map(x => x.value);
      // eslint-disable-next-line prefer-const
      citys = cityList.map(x => x.value);
      // eslint-disable-next-line prefer-const
      stroes = storeList.map(x => x.value);
      // eslint-disable-next-line prefer-const
      rightSecondId = str.split('_')[0];
      // eslint-disable-next-line prefer-const
      rightThreeId = str.split('_')[1];
      this.objM.set(str, {
        regions, citys, stroes, rightSecondId, rightThreeId,
        groupId
      });
    },
    save() {
      const params = {
        groupRightList: []
      };
      this.objM.forEach(val => {
        // console.log(val);
        params.groupRightList.push(val);
      });
      addGroupRight(params).then(({ data }) => {
        this.msgSuccess('角色权限保存成功');
        this.goBack();
      });
    }
  }
};
</script>
<style lang='scss' scoped>
</style>
